<template>
	<view>
		<movable-area class="hd">
			<movable-view
			class="active"
			direction='horizontal' 
			:inertia="true" 
			:out-of-bounds='true'
			:scale='true'
		    :x="x" :y="y"	
			@change="onChange"
									>
			(*^▽^*)</movable-view>
		</movable-area>
		<view @tap="move">点一点就移动</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x:0,
				y:0,
				old:{
					x:0,
					y:0
				}
				
			}
		},
		methods: {
			move(){
				    this.x = this.old.x
				    this.$nextTick(function(){
				    	this.x = 30
				    })        
				                
				        
			},
			onChange(e){
				
				this.old.x=e.detail.x
			}
			
		}
	}
</script>

<style lang="less">
.hd{
	width: 98%;
	height: 60px;
	border: 3px dashed red;
	margin: 20px 0;
	border-radius: 5px;
	.active{
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		width: 60px;
		height:56px;
		margin: 2px;
		background-color: red;
		border-radius: 5px;
	}
	
}


</style>
